<!--
  文件描述：节点组件
  nodeType： 0发起人 、1中间节点人 、2条件 、3具体条件
-->
<template>
  <div :class="['node', processData.nodeType === '1' ? 'approveNode' : '']">
    <!--  名称，详情  -->
    <div class="node-box">
      <div class="node-box-title" :style="{ background: processData.nodeType === '0' ? '#909399' : '#409EFF' }">
        <div class="ellipsis-text">{{ processData.nodeType === '0' ? '发起人' : '审批人' }}</div>
        <el-icon size="20" class="title-icon" @click="deleMe"
          :style="{ display: processData.nodeType === '0' || disabled ? 'none' : '' }">
          <Close />
        </el-icon>
      </div>
      <div class="node-box-dec" @click="open()">
        <div class="ellipsis-text">{{ processData.nodeNm }}</div>
        <el-icon>
          <ArrowRight />
        </el-icon>
      </div>
    </div>
    <!--  按钮以及线  -->
    <add-node-btn :process-data="processData" :disabled="disabled" />
  </div>
  <el-drawer v-model="drawer" title="审批人配置" append-to-body :size="$isMobile() ? '80%' : '30%'">
    <el-form label-width="auto" :model="_processData" :disabled="disabled" :rules="rules" ref="ruleFormRef">
      <el-form-item label="节点名称：" prop="nodeNm">
        <el-input clearable v-model="_processData.nodeNm" placeholder="请输入节点名称" style="width: 200px;" />
      </el-form-item>
      <el-form-item label="多人审批方式：" v-if="_processData.nodeType === '1'" prop="multiType">
        <el-radio-group v-model="_processData.multiType" @change="(value) => _processData.approvalType = value">
          <el-radio value="0">或签(只需一名审批人同意或拒绝即可)</el-radio>
          <el-radio value="1">会签(需要所有审批人同意，不限顺序)</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="节点审批类型：" prop="approvalType">
        <el-radio-group v-model="_processData.approvalType">
          <el-radio value="0"
            v-if="_processData.nodeType === '0' || _processData.multiType === '0'">用户自选下级审批人</el-radio>
          <el-radio value="1">系统自设下级审批人</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="节点退回策略：" v-if="_processData.nodeType === '1'" prop="backStrategy">
        <el-radio-group v-model="_processData.backStrategy">
          <el-radio value="0">退回到发起人</el-radio>
          <el-radio value="1">退回到上一节点</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="审批人类型：" prop="assigneeType">
        <el-radio-group v-model="_processData.assigneeType" @change="selectAssigneeType">
          <el-radio value="n" v-if="_processData.nodeType === '0'">不指定</el-radio>
          <el-radio value="0">指定人</el-radio>
          <el-radio value="1">指定角色和部门</el-radio>
          <el-radio value="2">指定角色</el-radio>
          <el-radio value="3">指定部门</el-radio>
          <el-radio value="4">直属上级领导</el-radio>
          <el-radio value="5">提交人自己</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="选择用户：" v-if="_processData.assigneeType === '0'" prop="assigneeValue">
        <user-select :max="10" :userIds="_processData.assigneeValue"
          @update:userIds="(userIds) => _processData.assigneeValue = userIds"></user-select>
      </el-form-item>
      <el-form-item label="选择角色：" v-if="_processData.assigneeType === '2' || _processData.assigneeType === '1'"
        prop="roleId">
        <el-select clearable filterable v-model="_processData.roleId" placeholder="请选择角色" @change="selectAssigneeValue"
          style="width: 200px">
          <el-option v-for="item in rolesOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" />
        </el-select>
      </el-form-item>
      <el-form-item label="选择部门：" v-if="_processData.assigneeType === '3' || _processData.assigneeType === '1'"
        prop="deptId">
        <el-tree-select clearable v-model="_processData.deptId" :data="deptsOptions" check-strictly
          :render-after-expand="false" placeholder="请选择部门" :props="{
            children: 'children',
            label: 'deptName',
            value: 'deptId'
          }" @change="selectAssigneeValue" style="width: 200px" />
      </el-form-item>
      <el-form-item label="操作按钮权限：" prop="operationButton" v-if="processData.nodeType !== '0'">
        <el-checkbox-group v-model="operationButton" @change="changeOperationButton">
          <el-checkbox value="0" label="同意" />
          <el-checkbox value="1" label="拒绝" />
          <el-checkbox value="2" label="退回" />
          <el-checkbox value="3" label="转办" />
          <el-checkbox value="4" label="加签" />
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="drawer = false">取消</el-button>
        <el-button type="primary" @click="save()">确认</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<script setup name="nodePage">
import { ref } from 'vue';
import api from "@/api"
import { getCacheWithExpiry, setCacheWithExpiry } from "@/utils/busi"
import addNodeBtn from '@/view/workflow/config/components/comp/add-node-btn.vue'
import { inject } from "vue";
import userSelect from "@/components/user-select.vue";
const props = defineProps({
  processData: {
    type: Object,
    default: {}
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const _processData = ref({})
const drawer = ref(false)
const ruleFormRef = ref()
const rolesOptions = ref([])
const deptsOptions = ref([])
const operationButton = ref([])
const rules = ref({
  nodeNm: [
    { required: true, message: '请输入节点名称', trigger: 'blur' },
  ],
  multiType: [
    { required: true, message: '请选择多人审批方式', trigger: 'blur' },
  ],
  approvalType: [
    { required: true, message: '请选择节点审批类型', trigger: 'blur' },
  ],
  backStrategy: [
    { required: true, message: '请选择退回策略', trigger: 'blur' },
  ],
  assigneeType: [
    { required: true, message: '请选择审批人类型', trigger: 'blur' },
  ],
  assigneeValue: [
    { required: true, message: '请选择用户', trigger: 'blur' },
  ],
  roleId: [
    { required: true, message: '请选择角色', trigger: 'blur' },
  ],
  deptId: [
    { required: true, message: '请选择部门', trigger: 'blur' },
  ],
  operationButton: [
    { required: true, message: '请选择操作按钮权限', trigger: 'blur' },
  ]
})
// 触发祖组件提供的方法
const deleData = inject('deleData')
const deleMe = () => {
  deleData?.({
    nodeId: props.processData.nodeId
  })
}

const open = () => {
  _processData.value = JSON.parse(JSON.stringify(props.processData))
  initAssignee(_processData.value.assigneeType)
  if (_processData.value.operationButton) {
    operationButton.value = _processData.value.operationButton.split(',')
  }
  drawer.value = true
}

const getRoles = async () => {
  let options = getCacheWithExpiry('wfRolesOptions')
  if (!options) {
    const res = await api.get('/author/role/pageList', { pageNum: 1, pageSize: 999 })
    if (res.data.code === 200) {
      options = res.data.data.records
      setCacheWithExpiry('wfRolesOptions', options, 600000)
    } else {
      ElMessage.error(res.data.msg)
    }
  }
  rolesOptions.value = options
}

const getDeptsOptions = async () => {
  let options = getCacheWithExpiry('wfDeptsOptions')
  if (!options) {
    const res = await api.get('/author/dept/treeData')
    if (res.data.code === 200) {
      options = res.data.data
      setCacheWithExpiry('wfDeptsOptions', options, 600000)
    } else {
      ElMessage.error(res.data.msg)
    }
  }
  deptsOptions.value = options
}

const selectAssigneeValue = () => {
  if (_processData.value.roleId && _processData.value.deptId) {
    _processData.value.assigneeValue = _processData.value.roleId + ',' + _processData.value.deptId
  } else if (_processData.value.roleId) {
    _processData.value.assigneeValue = _processData.value.roleId
  } else {
    _processData.value.assigneeValue = _processData.value.deptId
  }
}

const selectAssigneeType = (type) => {
  _processData.value.assigneeValue = null
  _processData.value.roleId = null
  _processData.value.deptId = null
  initAssignee(type)
}

const changeOperationButton = () => {
  _processData.value.operationButton = operationButton.value.join(',')
  console.log(_processData.value.operationButton)
}

const initAssignee = (type) => {
  if (type === '1') {
    if (_processData.value.assigneeValue) {
      const assignee = _processData.value.assigneeValue
      const assigneeArr = assignee.split(',')
      _processData.value.roleId = assigneeArr[0]
      _processData.value.deptId = assigneeArr[1]
    }
    getRoles()
    getDeptsOptions()
  } else if (type === '2') {
    _processData.value.roleId = _processData.value.assigneeValue
    getRoles()
  } else if (type === '3') {
    _processData.value.deptId = _processData.value.assigneeValue
    getDeptsOptions()
  }
}

const save = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      props.processData.nodeNm = _processData.value.nodeNm
      props.processData.multiType = _processData.value.multiType
      props.processData.approvalType = _processData.value.approvalType
      props.processData.backStrategy = _processData.value.backStrategy
      props.processData.assigneeType = _processData.value.assigneeType
      props.processData.assigneeValue = _processData.value.assigneeValue
      props.processData.operationButton = _processData.value.operationButton
      drawer.value = false
    }
  })
}
</script>
<style scoped lang="less">
@import '@/view/workflow/config/components/index.less';
</style>